<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>Bootstrap 101 Template</title>
    <link href="./lib/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/coudanpin.css">
    <!--[if lt IE 9]>
      <script src="./lib/html5shiv/html5shiv.min.js"></script>
      <script src="./lib/respond/respond.js"></script>
    <![endif]-->
</head>

<body>
    <header>
        <div class="bar_left">
            <a href="index.html"></a>
        </div>
        <div class="bar_center">
            <h1>凑单品</h1>
        </div>
        <div class="bar_right">
            <a href="javascript:;"></a>
        </div>
    </header>
    <section id="search">
        <div class="inner">
            <div class="wrapper-demo">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="true">
                        <span id="sjtxt" data-shopid="0">京东</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="shangjia">
                        <li data-shopid="0">
                            <a href="javascript:;">京东</a>
                        </li>
                        <li data-shopid="1">
                            <a href="javascript:;">一号店</a>
                        </li>
                        <li data-shopid="2">
                            <a href="javascript:;">天猫超市</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wrapper-demo">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="true">
                        <span id="diqu" data-areaid="0">华北（北京、山西等）</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="Area">
                        <li data-areaid="0">
                            <a href="javascript:;">华北（北京、山西等）</a>
                        </li>
                        <li data-areaid="1">
                            <a href="javascript:;">华东（山东、浙江等）</a>
                        </li>
                        <li data-areaid="2">
                            <a href="javascript:;">华南（广东、广西等）</a>
                        </li>
                        <li data-areaid="3">
                            <a href="javascript:;">华中（湖北、河南等）</a>
                        </li>
                        <li data-areaid="4">
                            <a href="javascript:;">西南（四川、云南等）</a>
                        </li>
                        <li data-areaid="5">
                            <a href="javascript:;">东北（辽宁、吉林等）</a>
                        </li>
                        <li data-areaid="6">
                            <a href="javascript:;">西北（宁夏、新疆等）</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="wrapper-demo">
                <div class="dropdown">
                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="true">
                        <span id="jiage">价格</span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="yuan">
                        <li>
                            <a href="javascript:;">1-3元</a>
                        </li>
                        <li>
                            <a href="javascript:;">3-5元</a>
                        </li>
                        <li>
                            <a href="javascript:;">5-10元</a>
                        </li>
                        <li>
                            <a href="javascript:;">10-15元</a>
                        </li>
                        <li>
                            <a href="javascript:;">15元以上</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="search_btn">
            <a href="javascript:;"></a>
        </div>
    </section>
    <section id="products">
        <div class="item">   
            <ul id="products_items">
                <li>
                    <a href="javascript:;">
                        <div class="mc-pic">
                            <img src="./images/56569c5bNaa303c6f.jpg" alt="">
                            <div class="mc-title">[京东超市] 一楠 咖啡 白咖啡 三合一速溶咖啡单条</div>
                            <div class="mc-price">
                                <div class="prices">￥1.00</div>
                                <div class="btn-buy">去凑单</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="mc-pic">
                            <img src="./images/56569c5bNaa303c6f.jpg" alt="">
                            <div class="mc-title">[京东超市] 一楠 咖啡 白咖啡 三合一速溶咖啡单条</div>
                            <div class="mc-price">
                                <div class="prices">￥1.00</div>
                                <div class="btn-buy">去凑单</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="mc-pic">
                            <img src="./images/56569c5bNaa303c6f.jpg" alt="">
                            <div class="mc-title">[京东超市] 一楠 咖啡 白咖啡 三合一速溶咖啡单条</div>
                            <div class="mc-price">
                                <div class="prices">￥1.00</div>
                                <div class="btn-buy">去凑单</div>
                            </div>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <div class="mc-pic">
                            <img src="./images/56569c5bNaa303c6f.jpg" alt="">
                            <div class="mc-title">[京东超市] 一楠 咖啡 白咖啡 三合一速溶咖啡单条</div>
                            <div class="mc-price">
                                <div class="prices">￥1.00</div>
                                <div class="btn-buy">去凑单</div>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <!-- 遮罩层 -->
    <div class="message-container" id="message-container">
        <div class="message-wrap">
            <div class="message-content">
                该商品断货~
                <a href="javascript:;" class="off glyphicon glyphicon-remove"></a>
            </div>
        </div>
    </div>
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/coudanpin.js"></script>
</body>

</html>